.users-wrapper
  margin: 0
  background: #f4f4f4

.users-inner
  clearfix()
  @media screen
    max-width: max-width
    margin: 0 auto

.user-head
    margin-bottom: 30px
    margin-top: 30px
    text-align: center

    p
        color: #aeaeae
        font-size: 13px
    h1
        margin-top: 10px
        margin-bottom: 10px
        font-size: 30px
        font-weight: 200

.row
    margin-bottom: 20px
    display: flex
    justify-content: flex-start
    @media mq-mobile
      flex-direction: column
      margin: 0

.user-desc 
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    bottom: 0;
    display: table-cell;
    vertical-align: middle;
    background: rgba(0,0,0,0.8);
    color: #fff;
    display: none;

    h1
        font-size: 24px;
        margin-bottom: 15px;
        margin-top: 20px;
    
    p
        font-size: 12px;
        text-align: left;
        padding: 0 15px;
        margin-top: 0px;
        inline-size: unset;

.col
    position: relative
    margin-right: 20px;
    background-color: white;
    border: 1px solid #EEEEEE;
    margin-bottom: 20px;
    height: 150px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(25% - 25px)
    @media mq-mobile
      margin: 0 20px 20px 20px
      width: auto

    &:hover
        .user-desc 
            display: block 

    img
        max-width: 200px;
        max-height: 52px;
